<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jerry Qu's HTML document</title>
    <meta http-equiv="Pragma" content="no-cache" />  
    <meta http-equiv="Cache-Control" content="no-cache" />     
    <meta http-equiv="Expires" content="0" />
    <meta http-equiv="ImageToolbar" content="no" />
    <style type="text/css" title="default" media="screen">
		body{font-size:13px}
		#container{width:550px;height:400px;border:1px solid blue;position:relative}
    </style>
	<script type="text/javascript" src="main.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var btn = document.getElementsByTagName("input")[0];
			btn.disabled = false;

			QW.NodeW(btn).on("click",function(){
				btn.disabled = true;
				var container = QW.Dom.g("container");
				container.innerHTML = "";
				var easing = new Function("p","d",QW.Dom.g("txt").value);
				var ef = new QW.Anim(function(per){
					var x = parseInt(550*per)-2;
					var y = parseInt(easing(per,400))-2;
					var d = document.createElement("div");
					with(d.style){
						height = "3px";
						width = "3px";
						overflow = "hidden";
						backgroundColor = "red";
						position = "absolute";
						left = x+"px";
						bottom = y+"px";
					};
					container.appendChild(d);
				}, 5000);
				ef.onend = function(){
					btn.disabled = false;
				};
				ef.start();
			});
		};
	</script>
    </head>
	<body>
		<h2>动画类算子</h2>
		<p>
			<textarea id="txt" rows="5" cols="40">return -d/2 * (Math.cos(Math.PI*p) - 1);</textarea><br /><input type="button" value="绘图" />&nbsp;&nbsp;(p:动画运行百分比，d:运动距离)
		</p>
		<div id="container">

		</div>
	</body>
</html>
